<template>
  <div class="min-h-screen flex flex-col dark:bg-gray-900">
    <!-- 导航栏 -->
    <Header
      :isMobileMenuOpen="isMobileMenuOpen"
      @toggleMobileMenu="isMobileMenuOpen = !isMobileMenuOpen"
      class="shadow-md bg-gray-50 dark:bg-gray-900 transition-colors duration-300"
    />
    <!-- 移动菜单内容 -->
    <div
      v-show="isMobileMenuOpen"
      class="md:hidden bg-white dark:bg-gray-900 shadow-lg z-10 transform transition-all duration-300 ease-in-out"
    >
      <div class="px-4 py-3 flex items-center text-gray-600 dark:text-gray-300">
        <ThemeToggle class="mobile-theme-toggle dark:text-gray-300" />
        切换主题
      </div>
    </div>
    <!-- 主内容区 -->
    <main class="flex-1 w-full overflow-x-hidden">
      <div
        class="mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 md:flex md:gap-6 lg:gap-8 xl:gap-12 max-w-[90rem]"
      >
        <!-- 左侧目录 -->
        <div class="md:w-64 lg:w-72 xl:w-80 flex-shrink-0 mb-6 md:mb-0">
          <div
            ref="sidebarRef"
            class="dark:bg-gray-900 p-4 sm:p-6 rounded-xl shadow-sm sticky top-4 sm:top-8 transition-all duration-300 hover:shadow-md"
            :class="{
              'opacity-0': !isSidebarVisible,
              'opacity-100': isSidebarVisible,
            }"
          >
            <h3
              class="text-base sm:text-lg font-semibold dark:text-gray-100 text-primary-dark mb-3 sm:mb-4 flex items-center"
            >
              <svg
                class="w-4 h-4 sm:w-5 sm:h-5 mr-2"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"
                ></path>
              </svg>
              内容目录
            </h3>
            <nav class="space-y-2">
              <div
                class="max-h-[calc(100vh-8rem)] sm:max-h-[calc(100vh-12rem)] overflow-y-auto pr-2 custom-scrollbar"
              >
                <ul class="space-y-1 sm:space-y-2">
                  <template v-for="link in fetchFileDirectory" :key="link.path">
                    <li class="mb-1 sm:mb-2">
                      <div class="flex items-center">
                        <button
                          v-if="link.children && link.children.length"
                          @click="toggleCollapse(link.path)"
                          class="w-4 h-4 mr-1 flex items-center justify-center text-gray-500 hover:text-primary-light transition-colors duration-200"
                        >
                          <svg
                            class="w-3 h-3 transition-transform duration-200"
                            :class="{ 'rotate-90': !isCollapsed(link.path) }"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          >
                            <polyline points="9 18 15 12 9 6"></polyline>
                          </svg>
                        </button>
                        <NuxtLink
                          :to="link.path"
                          class="flex-1 text-sm sm:text-base font-medium text-gray-900 dark:text-white hover:text-primary-light dark:hover:text-primary-light transition-colors duration-200"
                          :class="{
                            'text-primary-light': route.path === link.path,
                            'font-semibold': route.path === link.path,
                          }"
                        >
                          {{ link.title }}
                        </NuxtLink>
                      </div>
                      <!-- 子目录 -->
                      <Transition
                        enter-active-class="transition-all duration-300 ease-out"
                        leave-active-class="transition-all duration-200 ease-in"
                        enter-from-class="opacity-0 -translate-y-2"
                        enter-to-class="opacity-100 translate-y-0"
                        leave-from-class="opacity-100 translate-y-0"
                        leave-to-class="opacity-0 -translate-y-2"
                      >
                        <ul
                          v-if="
                            link.children &&
                            link.children.length &&
                            !isCollapsed(link.path)
                          "
                          class="pl-4 space-y-1 sm:space-y-2 mt-1 sm:mt-2 border-l border-gray-200 dark:border-gray-700"
                        >
                          <li
                            v-for="child in link.children"
                            :key="child.path"
                            class="mb-1 sm:mb-2"
                          >
                            <div class="flex items-center">
                              <button
                                v-if="child.children && child.children.length"
                                @click="toggleCollapse(child.path)"
                                class="w-4 h-4 mr-1 flex items-center justify-center text-gray-500 hover:text-primary-light transition-colors duration-200"
                              >
                                <svg
                                  class="w-3 h-3 transition-transform duration-200"
                                  :class="{
                                    'rotate-90': !isCollapsed(child.path),
                                  }"
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  stroke="currentColor"
                                  stroke-width="2"
                                  stroke-linecap="round"
                                  stroke-linejoin="round"
                                >
                                  <polyline points="9 18 15 12 9 6"></polyline>
                                </svg>
                              </button>
                              <NuxtLink
                                :to="child.path"
                                class="flex-1 text-sm sm:text-base text-gray-700 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-light transition-colors duration-200"
                                :class="{
                                  'text-primary-light':
                                    route.path === child.path,
                                  'font-semibold': route.path === child.path,
                                }"
                              >
                                {{ child.title }}
                              </NuxtLink>
                            </div>
                            <!-- 子目录的文章 -->
                            <Transition
                              enter-active-class="transition-all duration-300 ease-out"
                              leave-active-class="transition-all duration-200 ease-in"
                              enter-from-class="opacity-0 -translate-y-2"
                              enter-to-class="opacity-100 translate-y-0"
                              leave-from-class="opacity-100 translate-y-0"
                              leave-to-class="opacity-0 -translate-y-2"
                            >
                              <ul
                                v-if="
                                  child.children &&
                                  child.children.length &&
                                  !isCollapsed(child.path)
                                "
                                class="pl-4 space-y-1 mt-1 border-l border-gray-200 dark:border-gray-700"
                              >
                                <li
                                  v-for="article in child.children"
                                  :key="article.path"
                                >
                                  <NuxtLink
                                    :to="article.path"
                                    class="block text-xs sm:text-sm text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-light transition-colors duration-200"
                                    :class="{
                                      'text-primary-light':
                                        route.path === article.path,
                                      'font-semibold':
                                        route.path === article.path,
                                    }"
                                  >
                                    {{ article.title }}
                                  </NuxtLink>
                                </li>
                              </ul>
                            </Transition>
                          </li>
                        </ul>
                      </Transition>
                    </li>
                  </template>
                </ul>
              </div>
            </nav>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="flex-1 min-w-0">
          <!-- 面包屑导航 -->
          <div class="mb-4 sm:mb-6">
            <nav
              class="flex items-center space-x-2 text-xs sm:text-sm text-gray-600 dark:text-gray-400"
            >
              <NuxtLink
                to="/"
                class="hover:text-primary-light dark:hover:text-primary-light transition-colors duration-200 flex items-center"
              >
                <svg
                  class="w-3 h-3 sm:w-4 sm:h-4 mr-1"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                  ></path>
                </svg>
                首页
              </NuxtLink>
              <span class="text-gray-400">/</span>
              <span class="text-primary-light">{{ route.params.slug[0] }}</span>
            </nav>
          </div>

          <!-- 目录列表 -->
          <div class="space-y-4 sm:space-y-6">
            <h1
              class="text-2xl sm:text-3xl font-bold text-primary-dark dark:text-gray-100 mb-6 sm:mb-8 flex items-center"
            >
              <svg
                class="w-6 h-6 sm:w-8 sm:h-8 mr-2 sm:mr-3 text-primary-light"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                ></path>
              </svg>
              {{ route.params.slug[0] }}
            </h1>
            <div class="grid gap-4 sm:gap-6">
              <template v-if="page">
                <div class="prose dark:prose-invert max-w-none overflow-x-auto">
                  <ContentRenderer :value="page"></ContentRenderer>
                </div>
                <!-- 文章导航 -->
                <div
                  class="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700"
                >
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
                    <div v-if="surroundArticles[0]" class="group">
                      <template v-if="surroundArticles[0].path">
                        <NuxtLink
                          :to="surroundArticles[0].path"
                          class="flex items-center p-3 sm:p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary-light dark:hover:border-primary-light transition-colors duration-200"
                        >
                          <div class="flex-1">
                            <div
                              class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-1"
                            >
                              上一篇文章
                            </div>
                            <div
                              class="text-sm sm:text-base text-gray-900 dark:text-gray-100 group-hover:text-primary-light dark:group-hover:text-primary-light transition-colors duration-200"
                            >
                              {{ surroundArticles[0].title }}
                            </div>
                          </div>
                          <svg
                            class="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-primary-light dark:group-hover:text-primary-light transition-colors duration-200"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M15 19l-7-7 7-7"
                            />
                          </svg>
                        </NuxtLink>
                      </template>
                    </div>
                    <div v-if="surroundArticles[1]" class="group">
                      <NuxtLink
                        :to="surroundArticles[1].path"
                        class="flex items-center p-3 sm:p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary-light dark:hover:border-primary-light transition-colors duration-200"
                      >
                        <svg
                          class="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-primary-light dark:group-hover:text-primary-light transition-colors duration-200"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M9 5l7 7-7 7"
                          />
                        </svg>
                        <div class="flex-1 text-right">
                          <div
                            class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-1"
                          >
                            下一篇文章
                          </div>
                          <div
                            class="text-sm sm:text-base text-gray-900 dark:text-gray-100 group-hover:text-primary-light dark:group-hover:text-primary-light transition-colors duration-200"
                          >
                            {{ surroundArticles[1].title }}
                          </div>
                        </div>
                      </NuxtLink>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </main>

    <Footer
      class="dark:bg-gray-900 bg-gray-50 transition-colors duration-300"
    />
  </div>
</template>

<script setup lang="ts">
// 方法1: 使用相对路径
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import ThemeToggle from "../components/ThemeToggle.vue";
import type { PageCollections } from "@nuxt/content";

const route = useRoute();
const slug = route.params.slug?.[0];

const isMobileMenuOpen = ref(false);

// 折叠状态管理
const collapsedPaths = ref(new Set<string>());

const toggleCollapse = (path: string) => {
  if (collapsedPaths.value.has(path)) {
    collapsedPaths.value.delete(path);
  } else {
    collapsedPaths.value.add(path);
  }
};

const isCollapsed = (path: string) => {
  return collapsedPaths.value.has(path);
};

//获取对应侧边导航
const { data: fetchFileDirectory } = await useAsyncData("navigation", () => {
  return queryCollectionNavigation(slug as keyof PageCollections);
});

//获取对应文章内容
const { data: page } = await useAsyncData(`${route.path}`, () => {
  return queryCollection(slug as keyof PageCollections)
    .path(route.path)
    .first();
});
interface surroundArticlesType {
  title: string;
  path: string;
}
const surroundArticles = ref<surroundArticlesType[]>([]);
//获取当前文章的上一篇文章和下一篇文章
const { data: values } = await useAsyncData(`${route.path}-previous`, () => {
  return queryCollectionItemSurroundings(
    slug as keyof PageCollections,
    route.path
  );
});
if (values.value) {
  surroundArticles.value = values.value as surroundArticlesType[];
}

// 添加侧边栏可见性状态
const isSidebarVisible = ref(true);
const sidebarRef = ref<HTMLElement | null>(null);

// 监听侧边栏可见性
onMounted(() => {
  if (process.client) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          isSidebarVisible.value = entry.isIntersecting;
        });
      },
      {
        threshold: 0.1, // 当10%的元素可见时触发
        rootMargin: "0px", // 可以调整这个值来改变触发时机
      }
    );

    if (sidebarRef.value) {
      observer.observe(sidebarRef.value);
    }

    // 组件卸载时清理
    onUnmounted(() => {
      if (sidebarRef.value) {
        observer.unobserve(sidebarRef.value);
      }
    });
  }
});
</script>

<style>
/* 添加平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 添加过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 自定义滚动条样式 */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: theme("colors.gray.300") theme("colors.gray.100");
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: theme("colors.gray.100");
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: theme("colors.gray.300");
  border-radius: 2px;
}

.dark .custom-scrollbar {
  scrollbar-color: theme("colors.gray.600") theme("colors.gray.800");
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: theme("colors.gray.800");
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: theme("colors.gray.600");
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: theme("colors.gray.400");
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: theme("colors.gray.500");
}

/* 文章导航动画 */
.group {
  transition: transform 0.2s ease;
}

.group:hover {
  transform: translateX(4px);
}

.group:last-child:hover {
  transform: translateX(-4px);
}

/* 响应式调整 */
@media (max-width: 640px) {
  .prose {
    font-size: 0.875rem;
  }

  .prose h1 {
    font-size: 1.5rem;
  }

  .prose h2 {
    font-size: 1.25rem;
  }

  .prose h3 {
    font-size: 1.125rem;
  }

  .prose img {
    margin: 1rem 0;
  }

  .prose pre {
    padding: 0.75rem;
  }

  .prose blockquote {
    padding-left: 1rem;
    margin: 1rem 0;
  }
}

/* 添加侧边栏过渡效果 */
.md\:w-64 .dark\:bg-gray-900 {
  transition: opacity 0.3s ease-in-out;
}
</style>
